<div [@routerTransition]>
  
    <div class="kt-subheader kt-grid__item">
      
        <div class="kt-subheader__main">
            <h3 class="kt-subheader__title">
                <span>{{l("PayOrders")}}</span>
            </h3>
            <span class="kt-subheader__separator kt-subheader__separator--v"></span>
            <span class="kt-subheader__desc">
                {{l("PayOrdersHeaderInfo")}}
            </span>
        </div>
        <div class="kt-subheader__toolbar">
            <div class="kt-subheader__wrapper">
				<button (click)="exportToExcel()" class="btn btn-outline-success"><i class="fa fa-file-excel"></i> {{l("ExportToExcel")}}</button>
                <button *ngIf="isGranted('Pages.PayOrders.Create')" (click)="createPayOrder()" 
			class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewPayOrder")}}</button>
            </div>
        </div>
      
    </div>
    <div class="kt-content">
        <div class="kt-portlet kt-portlet--mobile">
            <div class="kt-portlet__body">
                <form class="kt-form" autocomplete="off">
                    <div>
                        <div class="row align-items-center">
                            <div class="col-xl-12">
                                <div class="form-group m-form__group align-items-center">
                                    <div class="input-group">
                                        <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input" [placeholder]="l('SearchWithThreeDot')" type="text">
                                        <span class="input-group-btn">
                                            <button (click)="getPayOrders()" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
						 <div class="row" [hidden]="!advancedFiltersAreShown">
						 	<div class="col-md-12">
						         <div class="kt-separator kt-separator--border-dashed"></div>
						     </div>


							<div class="col-md-3">
								<div class="form-group">
									<label for="TradeNumFilter">{{l("TradeNum")}}</label>
									<input type="text" class="form-control" id="TradeNumFilter" name="tradeNumFilter" [(ngModel)]="tradeNumFilter">
								</div>
                            </div>

                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-12">
                                <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-down"></i> {{l("ShowAdvancedFilters")}}</span>
                                <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-up"></i> {{l("HideAdvancedFilters")}}</span>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="row align-items-center">
                    <!--<Primeng-Datatable-Start>-->
                    <div class="primeng-datatable-container col-12"
                         [busyIf]="primengTableHelper.isLoading">
                        <p-table #dataTable
                                     (onLazyLoad)="getPayOrders($event)"
                                     [value]="primengTableHelper.records"
                                     rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                     [paginator]="false"
                                     [lazy]="true"
                                     [scrollable]="true"
                                     ScrollWidth="100%"
                                     [responsive]="primengTableHelper.isResponsive"
                                     [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 130px" [hidden]="!isGrantedAny('Pages.PayOrders.Edit', 'Pages.PayOrders.Delete')">{{l('Actions')}}</th>
                                    <th style="width: 150px" pSortableColumn="tradeNum">
                                        {{l('TradeNum')}}
                                        <p-sortIcon field="payOrder.tradeNum"></p-sortIcon>
                                    </th>

                                </tr>
                            </ng-template>                           
							<ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td style="width: 130px"
                                        [hidden]="!isGrantedAny('Pages.PayOrders.Edit', 'Pages.PayOrders.Delete')">
                                       <div class="btn-group dropdown" dropdown container="body">
                                            <button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle>
                                                <i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}}
                                            </button>
												<ul class="dropdown-menu"  *dropdownMenu>
												<li>
													<a href="javascript:;"
														(click)="viewPayOrderModal.show(record)">{{l('View')}}</a>
												</li>
												<li>
													<a href="javascript:;" *ngIf="permission.isGranted('Pages.PayOrders.Edit')"
														(click)="createOrEditPayOrderModal.show(record.payOrder.id)">{{l('Edit')}}</a>
												</li>
												<li>
											        <a href="javascript:;" *ngIf="permission.isGranted('Pages.PayOrders.Delete')"
														(click)="deletePayOrder(record.payOrder)">{{l('Delete')}}</a>
												</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width:150px">
											<span class="ui-column-title"> {{l('TradeNum')}}</span>
											{{record.payOrder.tradeNum}}
										</td>

                                </tr>
                            </ng-template>
                        </p-table>
						<div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                            {{l('NoData')}}
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                         #paginator
                                         (onPageChange)="getPayOrders($event)"
                                         [totalRecords]="primengTableHelper.totalRecordsCount"
                                         [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                            </span>
                        </div>
                    </div>
                    <!--<Primeng-Datatable-End>-->
                </div>
            </div>
        </div>
    </div>

    <createOrEditPayOrderModal #createOrEditPayOrderModal (modalSave)="getPayOrders()"></createOrEditPayOrderModal>
    <viewPayOrderModal #viewPayOrderModal></viewPayOrderModal>
    
  
</div>
